<script setup lang="ts">
import { RouterView, useRoute, useRouter } from 'vue-router'
import { ref, watch } from 'vue'
import HeaderMenu from '@/components/PCcomponents/HeaderMenu.vue'

// import TabsView from './views/tabs/TabsView.vue'
const route = useRoute()
const router = useRouter()
// 记录当前选择的 tab
const active = ref(route.name as string)

watch(active, (nv) => {
  router.push({
    name: nv,
  })
})
</script>

<template>
  <div>
    <div class="home-header">
      <div class="home-header-content">
        <div class="header-left">
          <img
            src="../../assets/imgs/sysgamer-logo.png"
            style="width: 278px; height: 84px; float: left"
          />
        </div>
        <div class="header-right"><HeaderMenu></HeaderMenu></div>
      </div>
    </div>

    <RouterView />
  </div>
</template>

<style lang="scss" scoped>
.home-header {
  display: flex;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;

  .home-header-content {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 1200px;
    // padding-left: 180px;
  }
  .header-left {
    width: 288px;
    padding-right: 100px;
  }
  .header-right {
    flex: 1;

    display: flex;
    justify-content: end;
  }
}
</style>
<style>
.header-menu {
  width: 560px !important;
}
</style>
